<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0"
        :title="crud.status.title" width="500px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item label="文章管理ID">
            <el-input v-model="form.id" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="所属类型">
            <el-select v-model="form.cid" filterable placeholder="请选择">
              <el-option v-for="item in dict.newdict" :key="item.id" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="文章标题" prop="title">
            <el-input v-model="form.title" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="文章作者">
            <el-input v-model="form.author" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="文章图片" prop="imageInput">
            <el-input v-model="form.imageInput" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="文章简介">
            <el-input v-model="form.synopsis" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="content">
            <el-input v-model="form.content" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="文章分享标题">
            <el-input v-model="form.shareTitle" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="文章分享简介">
            <el-input v-model="form.shareSynopsis" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="浏览次数">
            <el-input v-model="form.visit" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="排序">
            <el-input v-model="form.sort" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="原文链接">
            <el-input v-model="form.url" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="状态">
            <el-input v-model="form.status" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="添加时间">
            <el-input v-model="form.createTime" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="updateTime">
            <el-input v-model="form.updateTime" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="isDel">
            <el-input v-model="form.isDel" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="是否隐藏">
            <el-input v-model="form.hide" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="管理员id">
            <el-input v-model="form.adminId" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="商户id">
            <el-input v-model="form.merId" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="产品关联id">
            <el-input v-model="form.productId" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="是否热门(小程序)">
            <el-input v-model="form.isHot" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="是否轮播图(小程序)">
            <el-input v-model="form.isBanner" style="width: 370px;" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;"
        @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55" />
        <el-table-column v-if="columns.visible('id')" prop="id" label="文章管理ID" />
        <el-table-column v-if="columns.visible('cid')" prop="cid" label="所属类型">
          <template slot-scope="scope">
            {{ dict.label.newdict[scope.row.cid] }}
          </template>
        </el-table-column>
        <el-table-column v-if="columns.visible('title')" prop="title" label="文章标题" />
        <el-table-column v-if="columns.visible('author')" prop="author" label="文章作者" />
        <el-table-column v-if="columns.visible('imageInput')" prop="imageInput" label="文章图片" />
        <el-table-column v-if="columns.visible('synopsis')" prop="synopsis" label="文章简介" />
        <el-table-column v-if="columns.visible('content')" prop="content" label="content" />
        <el-table-column v-if="columns.visible('shareTitle')" prop="shareTitle" label="文章分享标题" />
        <el-table-column v-if="columns.visible('shareSynopsis')" prop="shareSynopsis" label="文章分享简介" />
        <el-table-column v-if="columns.visible('visit')" prop="visit" label="浏览次数" />
        <el-table-column v-if="columns.visible('sort')" prop="sort" label="排序" />
        <el-table-column v-if="columns.visible('url')" prop="url" label="原文链接" />
        <el-table-column v-if="columns.visible('status')" prop="status" label="状态" />
        <el-table-column v-if="columns.visible('createTime')" prop="createTime" label="添加时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columns.visible('updateTime')" prop="updateTime" label="updateTime">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.updateTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columns.visible('isDel')" prop="isDel" label="isDel" />
        <el-table-column v-if="columns.visible('hide')" prop="hide" label="是否隐藏" />
        <el-table-column v-if="columns.visible('adminId')" prop="adminId" label="管理员id" />
        <el-table-column v-if="columns.visible('merId')" prop="merId" label="商户id" />
        <el-table-column v-if="columns.visible('productId')" prop="productId" label="产品关联id" />
        <el-table-column v-if="columns.visible('isHot')" prop="isHot" label="是否热门(小程序)" />
        <el-table-column v-if="columns.visible('isBanner')" prop="isBanner" label="是否轮播图(小程序)" />
        <el-table-column v-permission="['admin','sitArticle:edit','sitArticle:del']" label="操作" width="150px"
          align="center">
          <template slot-scope="scope">
            <udOperation :data="scope.row" :permission="permission" />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
  import crudSitArticle from '@/api/website/sitArticle'
  import CRUD, {
    presenter,
    header,
    form,
    crud
  } from '@crud/crud'
  import rrOperation from '@crud/RR.operation'
  import crudOperation from '@crud/CRUD.operation'
  import udOperation from '@crud/UD.operation'
  import pagination from '@crud/Pagination'
  import MaterialList from "@/components/material";

  // crud交由presenter持有
  const defaultCrud = CRUD({
    title: '官网文章',
    url: 'api/sitArticle',
    sort: 'id,desc',
    crudMethod: {
      ...crudSitArticle
    }
  })
  const defaultForm = {
    id: null,
    cid: null,
    title: null,
    author: null,
    imageInput: null,
    synopsis: null,
    content: null,
    shareTitle: null,
    shareSynopsis: null,
    visit: null,
    sort: null,
    url: null,
    status: null,
    createTime: null,
    updateTime: null,
    isDel: null,
    hide: null,
    adminId: null,
    merId: null,
    productId: null,
    isHot: null,
    isBanner: null
  }
  export default {
    name: 'SitArticle',
    components: {
      pagination,
      crudOperation,
      rrOperation,
      udOperation,
      MaterialList
    },
    mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
    dicts: ['newdict'],
    data() {
      return {

        permission: {
          add: ['admin', 'sitArticle:add'],
          edit: ['admin', 'sitArticle:edit'],
          del: ['admin', 'sitArticle:del']
        },
        rules: {
          title: [{
            required: true,
            message: '文章标题不能为空',
            trigger: 'blur'
          }],
          imageInput: [{
            required: true,
            message: '文章图片不能为空',
            trigger: 'blur'
          }]
        }
      }
    },
    watch: {},
    methods: {
      // 获取数据前设置好接口地址
      [CRUD.HOOK.beforeRefresh]() {
        return true
      }, // 新增与编辑前做的操作
      [CRUD.HOOK.afterToCU](crud, form) {},
    }
  }
</script>

<style scoped>
  .table-img {
    display: inline-block;
    text-align: center;
    background: #ccc;
    color: #fff;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    line-height: 32px;
  }
</style>
